<template>
    <div>
        <div class="m-25 mt-65">
            <div class="normal-box-mod">
                <div class="normal-box-bd">
                    <div class="normal-list-page-mod">
                        <div class="mb-2"
                             style="margin-bottom:40px">
                            <Button custom-icon="iconfont icon-fangkuai2"
                                    size="small"
                                    type="primary"
                                    @click="showCreateModal">
                                新建网点管理
                            </Button>
                        </div>
                        <div class="normal-list-page-bd">
                            <Table :columns="columns"
                                   :data="list.data"
                                   border></Table>
                        </div>
                        <Page :total="queryAdminData.totalRecord"
                              :current="queryAdminData.page"
                              :page-size="queryAdminData.limit"
                              show-total
                              show-elevator
                              show-sizer
                              @on-change="changePage"
                              @on-page-size-change="changePageSize"
                              style="text-align: center;" />
                    </div>
                </div>
                <!-- 新建-->

                <Modal v-model="level1Modal.modal1"
                       :title="level1Modal.title"
                       @on-ok="postData"
                       @on-cancel="cancel"
                       height="600px">
                    <Form :model="level1Modal.formData"
                          :rules="level1Modal.ruleValidate"
                          ref="systemFro"
                          :label-width="130">
                        <!-- <FormItem label="回收企业名称"
                              prop="companyName" >
                        <Input v-model="level1Modal.formData.companyName"
                               placeholder="请输入企业名称"
                               style="width:350px;" disabled></Input>
                    </FormItem> -->
                        <FormItem label="姓名"
                                  v-if="!adminFlag"
                                  prop="adminId">
                            <Select @on-change="changeAdminName"
                                    clearable
                                    label-in-value="true"
                                    v-model="level1Modal.formData.adminId"
                                    style="width:350px;">
                                <Option v-for="item in level1Modal.companyAdminOptions"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="姓名"
                                  v-if="adminFlag"
                                  prop="adminName">
                            <Input v-model="level1Modal.formData.adminName"
                                   placeholder="请输入姓名"
                                   style="width:350px;"
                                   disabled></Input>
                        </FormItem>
                        <FormItem label="手机号"
                                  prop="adminMobile">
                            <Input v-model="level1Modal.formData.adminMobile"
                                   placeholder="请输入手机号"
                                   style="width:350px;"></Input>
                        </FormItem>
                        <!-- <FormItem label="回收企业名称"
                                  prop="companyName">
                            <Input v-model="level1Modal.formData.companyName"
                                   placeholder="请输入回收企业"
                                   style="width:350px;"
                                   disabled></Input>
                        </FormItem>
                        <FormItem label="回收网点名称"
                                  prop="siteName">
                            <Input v-model="level1Modal.formData.siteName"
                                   placeholder="请输入回收网点"
                                   style="width:350px;"
                                   disabled></Input>
                        </FormItem> -->
                        <FormItem label="管理人员身份"
                                  prop="adminType">
                            <Select @on-change="changeCompanyCode"
                                    clearable
                                    label-in-value="true"
                                    v-model="level1Modal.formData.adminType"
                                    style="width:350px;">
                                <Option v-for="item in level1Modal.adminType"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <!-- <FormItem label="状态"
                                  prop="state">
                            <Select @on-change="changeCode"
                                    clearable
                                    label-in-value="true"
                                    v-model="level1Modal.formData.state"
                                    style="width:350px;">
                                <Option v-for="item in level1Modal.options"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}</Option>
                            </Select>

                        </FormItem> -->
                    </Form>
                </Modal>

                <!-- 回收站点管理员弹层 -->
                <Modal v-model="levelSiteModal.modal"
                       :title="levelSiteModal.title"
                       fullscreen
                       height="600px">
                    <siteAdmin :siteData="levelSiteModal.formData"
                               v-if="levelSiteModal.flag"></siteAdmin>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
import AdminApi from '@/api/recycle/admin.js'
export default {
	props: ['siteData'],
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10,
				companyId: '',
                siteId:''
			},
			queryAdminData: {
				page: 1,
				limit: 10,
				companyId: '',
                siteId:''
			},
			columns: [
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				// {
				// 	title: '回收管理员id',
				// 	key: 'adminId',
				// 	align: 'center'
				// },
				{
					title: '姓名',
					key: 'adminName',
					align: 'center'
				},
				{
					title: '手机号码',
					key: 'adminMobile',
					align: 'center'
				},
				{
					title: '管理人员身份',
					key: 'adminType',
					align: 'center',
					render: (create, params) => {
						let s = params.row.adminType
						let color, text
						if (s == 1) {
							color = '#5ed71a'
							text = '企业管理员'
						} else if (s == 2) {
							color = '#5ed71a'
							text = '网点管理员'
						} else if (s == 3) {
							color = '#5ed71a'
							text = '网点回收员'
						} else if (s == 4) {
							color = '#5ed71a'
							text = '网点清运人员'
						}
						return create(
							'div',
							{
								style: {
									color: color,
									borderRadius: '20px'
								}
							},
							text
						)
					}
				},
				// {
				// 	title: '回收企业id',
				// 	key: 'companyId',
				// 	align: 'center'
				// },
				{
					title: '回收企业名称',
					key: 'companyName',
					align: 'center'
				},
				{
					title: '回收网点名称',
					key: 'siteName',
					align: 'center'
				},
				{
					title: '状态',
					key: 'state',
					align: 'center',
					render: (h, params) => {
						let s = params.row.state
						return h('i-switch', {
							props: {
								value: s,
								size: 'large'
							},
							scopedSlots: {
								open: () => h('span', '正常'),
								close: () => h('span', '停用')
							},
							on: {
								'on-change': value => {
									this.changeState(params.row, value)
								}
							}
						})
					}
				},
				{
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '添加时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				// {
				// 	title: '状态',
				// 	key: 'state',
				// 	align: 'center',
				// 	render: (create, params) => {
				// 		let s = params.row.state
				// 		let color, text
				// 		if (s == 1) {
				// 			color = '#5ed71a'
				// 			text = '正常'
				// 		} else {
				// 			color = '#d72c23'
				// 			text = '停止运行'
				// 		}
				// 		return create(
				// 			'div',
				// 			{
				// 				style: {
				// 					color: color,
				// 					borderRadius: '20px'
				// 				}
				// 			},
				// 			text
				// 		)
				// 	}
				// },
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						return h('div', { class: 'action-group' }, [
							
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '编辑'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),

							h(
								'Tooltip',
								{
									props: {
										placement: 'right',
										content: '删除'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'error',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.delData(params.row)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-shanchusekuai',
													size: 18
												}
											})
										]
									)
								]
							)
						])
						// }
					}
				}
			],
			list: {
				data: []
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {
					// siteName: '',
					// siteAddress: '',
					// companyId: '',
					// companyName: '',
					// contacts: '',
					// mobile: '',
					// phone: '',
					state: 'false'
					// provId: '',
					// cityId: '',
					// distId: '',
					// strtId: '',
					// commId: '',
					// comminId: ''
				},
				ruleValidate: {
					adminId: [
						{
							required: true,
							message: '姓名不能为空'
						}
					],

					adminMobile: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号码格式不正确',
							trigger: 'blur'
						}
					],
                    adminType:[
                       {
							required: true,
							message: '管理员身份不能为空'
						} 
                    ]
				},
				companyAdminOptions: [
					// {
					// 	value: 4,
					// 	label: '杭州拱墅区再生资源回收有限公司'
					// },
				],
				adminType: [
					// {
					// 	value: 1,
					// 	label: '企业管理员'
					// },
					{
						value: 2,
						label: '网点管理员'
					},
					{
						value: 3,
						label: '网点回收员'
					},
					{
						value: 4,
						label: '网点清运人员'
					}
				],
				options: [
					{
						value: 'true',
						label: '正常'
					},
					{
						value: 'false',
						label: '停用'
					}
				],
				recyclingCompanyNameFlag: false,
				companyNameFlag: false
			},
			levelSiteModal: {
				modal: false,
				title: '回收站点管理员',
				formData: {},
				flag: false
			},
            adminFlag:false,
		}
	},
	mounted() {
        this.getAdminUnList()
        this.getPageList()
    },
    // 监听companyAdminData是否变化
	watch: {
		siteData(newValue, oldValue) {
			if (newValue != oldValue) {
				this.getAdminUnList()
                this.getPageList()
			}
		}
	},
	computed: {},
	methods: {
        // 加载区域企业未关联用户
		async getAdminUnList() {
			this.queryData.provId = this.siteData.provId
			this.queryData.cityId = this.siteData.cityId
			this.queryData.distId = this.siteData.distId
			this.queryData.strtId = this.siteData.strtId
			this.queryData.commId = this.siteData.commId
			this.queryData.comminId = this.siteData.comminId
			this.queryData.companyId = this.siteData.companyId
            this.queryData.siteId = this.siteData.id
			let data = (await AdminApi.getAdminUnList(this.queryData)).data
			if (data.length > 0) {
				const result = data.map(item => ({
					value: item.adminId + ' ' + item.adminMobile,
					label: item.adminName
				}))
				this.level1Modal.companyAdminOptions = result
			}else{
                this.level1Modal.companyAdminOptions = []
            }
		},
        // 管理员列表
		async getPageList() {
            
			this.queryAdminData.companyId = this.siteData.companyId
            this.queryAdminData.siteId = this.siteData.id
			let data = (await AdminApi.getPageList(this.queryAdminData)).data
			this.list.data = data.list
			this.queryAdminData.limit = data.pageSize
			this.queryAdminData.page = data.pageNum
			this.queryAdminData.totalRecord = data.totalRecord
		},
        showCreateModal() {

			this.level1Modal.modal1 = true
            this.adminFlag = false
			this.level1Modal.title = '新建网点管理员'
            this.level1Modal.formData.companyId = this.siteData.companyId
            this.level1Modal.formData.siteId = this.siteData.id
            this.level1Modal.formData.companyName = this.siteData.companyName
            this.level1Modal.formData.siteName = this.siteData.siteName
            this.level1Modal.formData.provId = this.siteData.provId
            this.level1Modal.formData.cityId = this.siteData.cityId
            this.level1Modal.formData.distId = this.siteData.distId
            this.level1Modal.formData.strtId = this.siteData.strtId
            this.level1Modal.formData.commId = this.siteData.commId
            this.level1Modal.formData.comminId = this.siteData.comminId
		},
        showUpdateModal(row) {

            this.adminFlag = true
            this.level1Modal.formData.id = row.id
            this.level1Modal.formData.adminId = row.adminId
            this.level1Modal.formData.adminName = row.adminName
            this.level1Modal.formData.adminMobile = row.adminMobile
            this.level1Modal.formData.adminType = row.adminType
            this.level1Modal.formData.companyId = row.companyId
            this.level1Modal.formData.companyName = row.companyName
            this.level1Modal.formData.siteId = row.siteId

            this.level1Modal.formData.siteName = row.siteName
            
            this.level1Modal.formData.state = JSON.stringify(row.state)
			this.level1Modal.modal1 = true
			this.level1Modal.title = '编辑网点管理员'
		},
        changeAdminName(val) {
			if (val) {
                console.log(val,'111111111111')
                let arr = val.value.split(" ");
                console.log(arr[0],arr[1])  
				this.level1Modal.formData.adminId = Number(arr[0])
                console.log(this.level1Modal.formData.adminId,'this.level1Modal.formData.adminId')
                this.level1Modal.formData.adminMobile = arr[1] 
				this.level1Modal.formData.adminName = val.label
                this.adminFlag = true
                console.log(this.level1Modal.formData,'this.level1Modal.formData')  
			}
		},
        postData() {
			let that = this
			this.$refs['systemFro'].validate(valid => {
				if (valid) {
                    that.level1Modal.formData.state = true
					if (!that.level1Modal.formData.id) {
						AdminApi.add(that.level1Modal.formData).then(
							res => {
								if (res.data) {
									that.$Message.success('添加成功')
									that.level1Modal.modal1 = false
									that.getPageList()
                                    that.getAdminUnList()
									this.$refs['systemFro'].resetFields()
									return
								} else {
									that.$Message.error(res.message)
								}
							}
						)
					} else if (that.level1Modal.formData.id) {
						//修改
						AdminApi.update(
							that.level1Modal.formData
						).then(res => {
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level1Modal.modal1 = false
								that.getPageList()
								this.$refs['systemFro'].resetFields()
                                that.level1Modal.formData = {}
								return
							} else {
                                this.$refs['systemFro'].resetFields()
								that.$Message.error(res.message)
							}
						})
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
        cancel() {
			this.$refs['systemFro'].resetFields()
		},
        delData(row) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.adminName +
					'</strong> 网点管理员吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					AdminApi.del(row.id).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getPageList()
                            this.getAdminUnList()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
        changeState(row, value) {
			let that = this
			this.$Modal.confirm({
				title: '确认修改',
				content:
					'<p>您确认修改id为 <strong>' +
					row.id +
					'</strong> 的 <strong>' +
					row.adminName +
					'</strong> 的管理员的状态嘛 吗?</p>',
				loading: true,
				onOk: () => {
					var formData = {
						id: row.id,
						state: value
					}
					AdminApi.update(formData).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							that.$Message.success('修改成功')
							that.level1Modal.modal1 = false
							that.getPageList()
							this.$refs['systemFro'].resetFields()
							return
						} else {
							this.$refs['systemFro'].resetFields()
							that.$Message.error(res.message)
						}
					})
				},
				onCancel: () => {
					this.getPageList()
				}
			})
		},
        // 分页 
        changePage(page) {
            this.queryAdminData.page = page
            this.getPageList()
		},
		changePageSize(pageSize) {
            this.queryAdminData.limit = pageSize
            this.getPageList()
		},
    }
}
</script>
<style scoped>
</style>
